function Dialog({ title = "默认标题", content = "无内容", footer = null }) {
    this.title = title;
    this.content = content;
    this.footer = footer
}

Dialog.prototype = {
    constructor: Dialog,
    init() {
        this.initEvent()
        this.renderHtml()
    },
    renderHtml() {
        let str =
            `
            <div class="dialog-wrappper">
                    <div class="masker"></div>
                    <div class="dialog-container">
                            <header>
                                <span>${this.title}</span>
                                <span class="close-icon">&times;</span>
                            </header>
                            <section>
                                ${this.content}
                            </section>
                               <footer style="display:${this.footer?'block':'none'}"> 
                        ${this.footer && this.fillFooter()}
                    </footer>
                    </div>
        </div>
       `
        let $link = $('<link rel="stylesheet" href="/js/oop/oop.css">')
        $('head').append($link)
        $('body').append(str);
    },
    fillFooter() {
        return this.footer.map((item, index) => {
            return `<button class="${index==0?'confirm':'cancel'}-btn">${item}</button>`
        }).join('')
    },
    initEvent() {
        $('body').on('click', '.close-icon,.cancel-btn', this.closeDialog)
    },
    closeDialog() {
        $('.dialog-wrappper').add($('head>link:last')).remove()
    }
}